import React, { useState } from 'react'
import { 
  CheckCircle, 
  Clock, 
  AlertTriangle, 
  Plus,
  Filter,
  Search,
  Calendar,
  Users,
  FileText,
  TrendingUp,
  Bell,
  Settings
} from 'lucide-react'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar } from 'recharts'

// Mock数据
const tasks = [
  {
    id: 1,
    title: '完成Q2碳足迹数据录入',
    description: '需要录入2024年第二季度的碳足迹数据',
    priority: 'high',
    status: 'in-progress',
    assignee: '张三',
    dueDate: '2024-06-30',
    progress: 75
  },
  {
    id: 2,
    title: 'ESG评估报告审核',
    description: '审核并确认ESG评估报告的准确性',
    priority: 'medium',
    status: 'pending',
    assignee: '李四',
    dueDate: '2024-07-05',
    progress: 0
  },
  {
    id: 3,
    title: '合规检查准备',
    description: '准备下个月的合规检查材料',
    priority: 'high',
    status: 'completed',
    assignee: '王五',
    dueDate: '2024-06-25',
    progress: 100
  },
  {
    id: 4,
    title: '数据分析报告生成',
    description: '生成AI驱动的数据分析报告',
    priority: 'low',
    status: 'in-progress',
    assignee: '赵六',
    dueDate: '2024-07-10',
    progress: 45
  }
]

const notifications = [
  {
    id: 1,
    type: 'success',
    title: '数据录入完成',
    message: 'Q2碳足迹数据录入已完成',
    time: '2分钟前',
    read: false
  },
  {
    id: 2,
    type: 'warning',
    title: '任务即将到期',
    message: 'ESG评估报告审核任务将在3天后到期',
    time: '1小时前',
    read: false
  },
  {
    id: 3,
    type: 'info',
    title: '系统更新',
    message: 'ESG平台已更新至最新版本',
    time: '3小时前',
    read: true
  }
]

const chartData = [
  { month: '1月', tasks: 45, completed: 38 },
  { month: '2月', tasks: 52, completed: 45 },
  { month: '3月', tasks: 48, completed: 42 },
  { month: '4月', tasks: 55, completed: 48 },
  { month: '5月', tasks: 60, completed: 52 },
  { month: '6月', tasks: 58, completed: 50 },
]

const quickStats = [
  { title: '总任务数', value: '156', change: '+12%', icon: FileText, color: 'text-blue-600' },
  { title: '完成率', value: '85.2%', change: '+3.5%', icon: CheckCircle, color: 'text-green-600' },
  { title: '逾期任务', value: '8', change: '-2', icon: AlertTriangle, color: 'text-red-600' },
  { title: '团队成员', value: '12', change: '+1', icon: Users, color: 'text-purple-600' },
]

function WorkbenchMain() {
  const [activeTab, setActiveTab] = useState('overview')
  const [taskFilter, setTaskFilter] = useState('all')

  const getPriorityColor = (priority) => {
    switch (priority) {
      case 'high': return 'text-red-600 bg-red-50'
      case 'medium': return 'text-yellow-600 bg-yellow-50'
      case 'low': return 'text-green-600 bg-green-50'
      default: return 'text-gray-600 bg-gray-50'
    }
  }

  const getStatusColor = (status) => {
    switch (status) {
      case 'completed': return 'text-green-600 bg-green-50'
      case 'in-progress': return 'text-blue-600 bg-blue-50'
      case 'pending': return 'text-yellow-600 bg-yellow-50'
      default: return 'text-gray-600 bg-gray-50'
    }
  }

  const filteredTasks = taskFilter === 'all' 
    ? tasks 
    : tasks.filter(task => task.status === taskFilter)

  return (
    <div className="p-6 space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">智能工作台</h1>
          <p className="text-gray-600">统一的工作界面和任务管理中心</p>
        </div>
        <button className="flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
          <Plus className="w-4 h-4 mr-2" />
          新建任务
        </button>
      </div>

      {/* 快速统计 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {quickStats.map((stat) => {
          const Icon = stat.icon
          return (
            <div key={stat.title} className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-600">{stat.title}</p>
                  <p className="text-2xl font-bold text-gray-900">{stat.value}</p>
                </div>
                <div className={`w-12 h-12 bg-gray-50 rounded-lg flex items-center justify-center`}>
                  <Icon className={`w-6 h-6 ${stat.color}`} />
                </div>
              </div>
              <div className="mt-2">
                <span className="text-sm text-green-600">{stat.change}</span>
                <span className="text-sm text-gray-500 ml-1">vs 上月</span>
              </div>
            </div>
          )
        })}
      </div>

      {/* 标签页导航 */}
      <div className="bg-white rounded-lg shadow-sm border border-gray-200">
        <div className="border-b border-gray-200">
          <nav className="flex space-x-8 px-6">
            {[
              { id: 'overview', name: '概览' },
              { id: 'tasks', name: '任务管理' },
              { id: 'notifications', name: '通知' },
              { id: 'analytics', name: '分析' }
            ].map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`py-4 px-1 border-b-2 font-medium text-sm ${
                  activeTab === tab.id
                    ? 'border-green-500 text-green-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                }`}
              >
                {tab.name}
              </button>
            ))}
          </nav>
        </div>

        <div className="p-6">
          {/* 概览标签页 */}
          {activeTab === 'overview' && (
            <div className="space-y-6">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {/* 任务完成趋势 */}
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">任务完成趋势</h3>
                  <ResponsiveContainer width="100%" height={300}>
                    <LineChart data={chartData}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="month" />
                      <YAxis />
                      <Tooltip />
                      <Line type="monotone" dataKey="tasks" stroke="#3B82F6" strokeWidth={2} name="总任务" />
                      <Line type="monotone" dataKey="completed" stroke="#10B981" strokeWidth={2} name="已完成" />
                    </LineChart>
                  </ResponsiveContainer>
                </div>

                {/* 任务分布 */}
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">任务状态分布</h3>
                  <ResponsiveContainer width="100%" height={300}>
                    <BarChart data={[
                      { status: '已完成', count: 45 },
                      { status: '进行中', count: 28 },
                      { status: '待处理', count: 15 },
                      { status: '已逾期', count: 8 }
                    ]}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="status" />
                      <YAxis />
                      <Tooltip />
                      <Bar dataKey="count" fill="#10B981" />
                    </BarChart>
                  </ResponsiveContainer>
                </div>
              </div>
            </div>
          )}

          {/* 任务管理标签页 */}
          {activeTab === 'tasks' && (
            <div className="space-y-4">
              {/* 过滤器 */}
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-4">
                  <select
                    value={taskFilter}
                    onChange={(e) => setTaskFilter(e.target.value)}
                    className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"
                  >
                    <option value="all">全部任务</option>
                    <option value="pending">待处理</option>
                    <option value="in-progress">进行中</option>
                    <option value="completed">已完成</option>
                  </select>
                  <button className="flex items-center px-3 py-2 text-gray-600 hover:text-gray-900">
                    <Filter className="w-4 h-4 mr-2" />
                    更多筛选
                  </button>
                </div>
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
                  <input
                    type="text"
                    placeholder="搜索任务..."
                    className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"
                  />
                </div>
              </div>

              {/* 任务列表 */}
              <div className="space-y-4">
                {filteredTasks.map((task) => (
                  <div key={task.id} className="bg-gray-50 rounded-lg p-4 border border-gray-200">
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <div className="flex items-center space-x-3 mb-2">
                          <h4 className="text-lg font-medium text-gray-900">{task.title}</h4>
                          <span className={`px-2 py-1 text-xs font-medium rounded-full ${getPriorityColor(task.priority)}`}>
                            {task.priority === 'high' ? '高优先级' : task.priority === 'medium' ? '中优先级' : '低优先级'}
                          </span>
                          <span className={`px-2 py-1 text-xs font-medium rounded-full ${getStatusColor(task.status)}`}>
                            {task.status === 'completed' ? '已完成' : task.status === 'in-progress' ? '进行中' : '待处理'}
                          </span>
                        </div>
                        <p className="text-gray-600 mb-3">{task.description}</p>
                        <div className="flex items-center space-x-6 text-sm text-gray-500">
                          <div className="flex items-center">
                            <Users className="w-4 h-4 mr-1" />
                            {task.assignee}
                          </div>
                          <div className="flex items-center">
                            <Calendar className="w-4 h-4 mr-1" />
                            {task.dueDate}
                          </div>
                          <div className="flex items-center">
                            <TrendingUp className="w-4 h-4 mr-1" />
                            进度: {task.progress}%
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center space-x-2">
                        <button className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg">
                          <Settings className="w-4 h-4" />
                        </button>
                      </div>
                    </div>
                    {/* 进度条 */}
                    <div className="mt-3">
                      <div className="w-full bg-gray-200 rounded-full h-2">
                        <div 
                          className="bg-green-600 h-2 rounded-full transition-all duration-300"
                          style={{ width: `${task.progress}%` }}
                        ></div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* 通知标签页 */}
          {activeTab === 'notifications' && (
            <div className="space-y-4">
              {notifications.map((notification) => (
                <div key={notification.id} className={`flex items-start space-x-3 p-4 rounded-lg border ${
                  notification.read ? 'bg-gray-50 border-gray-200' : 'bg-blue-50 border-blue-200'
                }`}>
                  <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
                    notification.type === 'success' ? 'bg-green-100' : 
                    notification.type === 'warning' ? 'bg-yellow-100' : 'bg-blue-100'
                  }`}>
                    {notification.type === 'success' ? (
                      <CheckCircle className="w-4 h-4 text-green-600" />
                    ) : notification.type === 'warning' ? (
                      <AlertTriangle className="w-4 h-4 text-yellow-600" />
                    ) : (
                      <Bell className="w-4 h-4 text-blue-600" />
                    )}
                  </div>
                  <div className="flex-1">
                    <h4 className="text-sm font-medium text-gray-900">{notification.title}</h4>
                    <p className="text-sm text-gray-600 mt-1">{notification.message}</p>
                    <p className="text-xs text-gray-500 mt-2">{notification.time}</p>
                  </div>
                  {!notification.read && (
                    <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                  )}
                </div>
              ))}
            </div>
          )}

          {/* 分析标签页 */}
          {activeTab === 'analytics' && (
            <div className="space-y-6">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div className="bg-gray-50 rounded-lg p-6">
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">工作效率分析</h3>
                  <div className="space-y-4">
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">平均任务完成时间</span>
                      <span className="text-sm font-medium">3.2天</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">任务完成率</span>
                      <span className="text-sm font-medium">85.2%</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">团队协作指数</span>
                      <span className="text-sm font-medium">92.1%</span>
                    </div>
                  </div>
                </div>
                <div className="bg-gray-50 rounded-lg p-6">
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">工作负载分布</h3>
                  <div className="space-y-4">
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">高优先级任务</span>
                      <span className="text-sm font-medium">12个</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">中优先级任务</span>
                      <span className="text-sm font-medium">28个</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">低优先级任务</span>
                      <span className="text-sm font-medium">16个</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

export default WorkbenchMain 